<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<!--<link rel="apple-touch-icon" sizes="76x76" href="/static/Anchor/assets/img/favicon.ico">-->
<!--<link rel="icon" type="image/png" href="/static/Anchor/assets/img/favicon.ico">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>做题系统A类练习</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
    
<!-- Google Font -->
<!--<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,700" rel="stylesheet">-->
    
<!--&lt;!&ndash; Font Awesome Icons &ndash;&gt;-->
<!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">-->
    
<!-- Main CSS -->
<link href="/static/Anchor/assets/css/main.css" rel="stylesheet"/>
    
<!-- Animation CSS -->
<link href="/static/Anchor/assets/css/vendor/aos.css" rel="stylesheet"/>
    
<!-- Docs CSS -->
<link href="/static/Anchor/assets/css/vendor/bootstrap-toc.css" rel="stylesheet"/>
<link href="/static/Anchor/assets/css/vendor/prism.css" rel="stylesheet"/>
<style>
	.lead{
		font-size: 1.4rem;
	}

	.SingleSelectUp:hover{
		background-color: #ebebeb;
	}

	.go-top {
		position: fixed;	        /* 设置fixed固定定位 */
		bottom: 20px;		/* 距离浏览器窗口下边框20px */
		right: 20px;		/* 距离浏览器窗口右边框20px */

		text-decoration: none;		/* 取消超链接下画线 */
		color: #333;			/* 设置文本颜色 */
		background-color: #f2f2f2;		/* 设置背景颜色 */
		border: 1px solid #ccc;		/* 设置边框样式 */
		padding: 10px 20px;			/* 设置内边距 */
		border-radius: 5px;			/* 设置圆角矩形 */
		letter-spacing: 2px;		/* 设置文字间距 */
	}

	.getWarning {
		position: fixed;	        /* 设置fixed固定定位 */
		bottom: 120px;		/* 距离浏览器窗口下边框20px */
		right: 20px;		/* 距离浏览器窗口右边框20px */

		text-decoration: none;		/* 取消超链接下画线 */
		/*color: #333;			!* 设置文本颜色 *!*/
		/*background-color: #f2f2f2;		!* 设置背景颜色 *!*/
		/*border: 1px solid #ccc;		!* 设置边框样式 *!*/
		padding: 10px 20px;			/* 设置内边距 */
		/*border-radius: 5px;			!* 设置圆角矩形 *!*/
		/*letter-spacing: 2px;		!* 设置文字间距 *!*/
	}

	.page-link{
		width: 3.1em;
		height: 3em;
		/*display:block;*/
		/*text-align:center;*/
	}

</style>


</head>
    
<body>  
    
    
<!----------------------------------------------------------------------
End fixed sidebar
------------------------------------------------------------------------>

<nav id="toc" class="fixedsidebar d-none d-lg-block">
    <h5 class="mt-4 mb-4 pt-1"><a class="text-dark" href="/index"><strong>业余无线电做题</strong> 系统</a></h5>
    <a href="/test10" class="btn btn-primary mb-4 btn-sm btn-round"><i class="fas fa-coffee mr-1"></i>重开一盘</a>
    <ul class="pagination">

        <li class="page-item active"><a class="page-link" href="#startTest">1 </a></li>
        <li class="page-item"><a class="page-link" href="#t2">2  </a></li>
        <li class="page-item"><a class="page-link" href="#t3">3 </a></li>
        <li class="page-item"><a class="page-link" href="#t4">4 </a></li>
        <li class="page-item"><a class="page-link" href="#t5">5 </a></li>
    </ul>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#t6">6  </a></li>
        <li class="page-item "><a class="page-link" href="#t7">7  </a></li>
        <li class="page-item"><a class="page-link" href="#t8">8 </a></li>
        <li class="page-item"><a class="page-link" href="#t9">9  </a></li>
        <li class="page-item"><a class="page-link" href="#t10">10 </a></li>
    </ul>
</nav>
    
<!----------------------------------------------------------------------
End fixed sidebar
------------------------------------------------------------------------> 
    
       
<main class="content-withfixedsidebar">
    
    
<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
	<a class="navbar-brand d-lg-none" href="/index"><i class="fas fa-anchor mr-2"></i><strong>业余无线电</strong> 碎片化练习</a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="navbar-collapse collapse" id="navbarColor02">
		<ul class="navbar-nav mr-auto d-flex align-items-center">
			<li class="nav-item">
			<a class="nav-link" href="./index.html">经验分享</a>
			</li>
			<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			业余无线电模拟考试 </a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdown">
				<a class="dropdown-item" href="/study/A30">A类学习</a>
				<a class="dropdown-item" href="/study/B50">B类学习</a>
				<a class="dropdown-item" href="/study/C80">C类学习</a>
				<a class="dropdown-item" href="/test10">A类随机复习</a>
				<a class="dropdown-item" href="/test10b">B类随机复习</a>
			</div>
			</li>
			<li class="nav-item">
			<a class="nav-link" href="./test10">A类随机复习</a>
			</li>
<!--            <li class="d-lg-none nav-item">-->
<!--            <a class="nav-link" target="_blank" href="https://www.wowthemes.net/donate/"><i class="fas fa-coffee mr-1"></i> Buy me a coffee</a>-->
<!--            </li>-->
		</ul>
		<ul class="navbar-nav ml-auto d-flex align-items-center">
			<li class="nav-item">
			<span class="nav-link" href="#">
<!--			<a class="btn btn-info btn-round shadow" href="#" data-toggle="modal" data-target="#modal_newsletter">-->
<!--				<i class="fas fa-cloud-download-alt"></i> 提交批改-->
<!--				<a  class="downloadzip hidden" ></a>-->
<!--			</a>-->
				<button type="button" class="btn btn-info btn-round " data-toggle="modal" data-target="#myModal" onclick="correct()">
				  提交批改
				</button>
			</span>
			</li>
		</ul>
	</div>
</div>
</nav>
<!-- End Navbar -->
    
<!-------------------------------------
HEADER
--------------------------------------->
<div class="jumbotron jumbotron-lg jumbotron-fluid jumbotron-lg-withnav mb-3 bg-primary position-relative" id="startTest">
	<div class="container text-white h-100 tofront">
		<div class="row align-items-center justify-content-center text-center">
			<div class="col-md-10" >
				<h1 class="display-3" id="haedTitle" style="cursor:default" >点击开始</h1>
			</div>
		</div>
	</div>
</div>
<!--- END HEADER -->

<!-- DOCS CONTENT -->
<div class="container pt-5 pb-5 mb-5">
	<div class="row justify-content-center">
      
<div class="col-lg-11">
<div id="docsarea" class="font-weight-normal">
<div th:each="title:${titles}" th:id="t+${titleStat.count+1}">
	<hr/>
	<p class="lead" >
		[[${titleStat.count}]].[[${title.context}]]
		<br/>
		<label class="SingleSelectUp">
			<input class="SingleSelect" th:id="A+${titleStat.count}" type="radio" th:name="optradio+${titleStat.count}"  th:text="'A.'+${title.Ase}" th:value="${title.Ase}"  disabled>
			<img th:id="icoTA+${titleStat.count}" src="/static/Anchor/assets/img/succ.svg" style="height: 2.2em;width: 2.2em;display: none; "/>
			<img th:id="icoFA+${titleStat.count}" src="/static/Anchor/assets/img/err.svg" style="height: 1.8em;width: 1.8em;display: none; "/>
		</label>
		<br/>
		<label class="SingleSelectUp">
			<input class="SingleSelect" th:id="B+${titleStat.count}" type="radio" th:name="optradio+${titleStat.count}" th:text="'B.'+${title.Bse}" th:value="${title.Bse}"  disabled>
			<img th:id="icoTB+${titleStat.count}" src="/static/Anchor/assets/img/succ.svg" style="height: 2.2em;width: 2.2em;display: none; "/>
			<img th:id="icoFB+${titleStat.count}" src="/static/Anchor/assets/img/err.svg" style="height: 1.8em;width: 1.8em;display: none; "/>
		</label>
		<br/>
		<label class="SingleSelectUp">
			<input class="SingleSelect" th:id="C+${titleStat.count}" type="radio" th:name="optradio+${titleStat.count}" th:text="'C.'+${title.Cse}" th:value="${title.Cse}"  disabled>
			<img th:id="icoTC+${titleStat.count}" src="/static/Anchor/assets/img/succ.svg" style="height: 2.2em;width: 2.2em;display: none; "/>
			<img th:id="icoFC+${titleStat.count}" src="/static/Anchor/assets/img/err.svg" style="height: 1.8em;width: 1.8em;display: none; "/>
		</label>
		<br/>
		<label class="SingleSelectUp">
			<input class="SingleSelect" th:id="D+${titleStat.count}" type="radio" th:name="optradio+${titleStat.count}"th:text="'D.'+${title.Dse}" th:value="${title.Dse}"  disabled>
			<img th:id="icoTD+${titleStat.count}" src="/static/Anchor/assets/img/succ.svg" style="height: 2.2em;width: 2.2em;display: none; "/>
			<img th:id="icoFD+${titleStat.count}" src="/static/Anchor/assets/img/err.svg" style="height: 1.8em;width: 1.8em;display: none; "/>
		</label>


		<br  style="display: none;"  />
		<div class="spaceAnswer"  th:id="trueAnswer+${titleStat.count}" style="font-size: 1.4em;display: none; " >
			选择正确：[[${title.answer}]]

    	</div>

		<br style="display: none;" />

	</p>
</div>






    

    
    
</div><!-- End docs -->
</div>
</div>
</div>
<!-- End DOCS -->


<!--	悬浮计时 -->
<div id="countTime" class="go-top" style="cursor:default">
	计时<br>开始

</div>
	<!--	悬浮警告 -->
<div id="warnInfo" class="alert alert-warning getWarning" style="font-size: 1.4rem;">
	<div id="closeWarnInfo" style="display: inline; font-size: 1.4em;" >☒  </div><strong>警告!</strong> 请点击开始计时后做题。
</div>
  
<!------------------------------------------
DEMO MODAL
------------------------------------------->
	<!-- 模态 -->
	<div class="modal" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">

				<!-- 模态标题 -->
				<div class="modal-header">
					<h4 class="modal-title">本次练习结果</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<!-- 模态主体 -->
				<div class="modal-body">
					<div id="useTime">用时：</div>
					<div id="tNum">正确：</div>
					<div id="fNum">错误：</div>
					<div id="notNum">未做：</div>
				</div>

				<!-- 模态页脚 -->
				<div class="modal-footer">

					<button type="button" class="btn btn-info" data-dismiss="modal">再看看题</button>
				</div>

			</div>
		</div>
	</div>
<!--------------------------------------
END DEMO MODAL & DONATE BUTTON
--------------------------------------->

    
<!--------------------------------------
FOOTER
--------------------------------------->
<footer class="bg-light pb-5 pt-4">
<div class="container">
	<div class="row justify-content-center text-center">
		<div class="col-md-12">			
			<span class="d-block mt-3 text-muted">©
			<script>document.write(new Date().getFullYear())</script>
				暗夜法师<br>
			<a target="_blank" href="https://beian.miit.gov.cn">渝ICP备2023013154号</a></span>
		</div>
	</div>
</div>
</footer>
    
    
</main>
<!--- end main -->
    
    
<!--------------------------------------
JAVASCRIPTS
--------------------------------------->    
<script src="/static/Anchor/assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/functions.js" type="text/javascript"></script>
    
<!-- Docs -->
<script src="/static/Anchor/assets/js/vendor/prism.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/vendor/bootstrap-toc.js" type="text/javascript"></script>
<script>
    $(function() {
      new ClipboardJS('.btn');
      var navSelector = '#toc';
      var $myNav = $(navSelector);
      Toc.init({
          $nav: $('#toc'),
          $scope: $('#docsarea')
        });
      $('body').scrollspy({
        target: navSelector
      });
    });
</script>

    
<!-- Animation -->
<script src="/static/Anchor/assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>
 
<!-- Disable animation on less than 1200px, change value if you like -->
<!--禁用小于1200px的动画，如果你喜欢，可以更改值-->
<script>
AOS.init({
  disable: function () {
    var maxWidth = 1200;
    return window.innerWidth < maxWidth;
  }
});
</script>
    
<!-- Tooltips -->
<script> $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script>
    
<!-- Popovers -->    
<script>

	$(function () {
	$('[data-toggle="popover"]').popover()
	})
	$('.popover-dismiss').popover({
	  trigger: 'focus'
	})
</script>

<script>
	var startButton = document.getElementById("startTest");
	var btnFlag=true;
	var haedTitle=document.getElementById("haedTitle");
	let timer;
	var SingleSelects = document.getElementsByClassName("SingleSelect");

	//警告消息框关闭按钮
	let closeWarnInfo = document.getElementById("closeWarnInfo");
	document.getElementById("warnInfo")
	closeWarnInfo.addEventListener("click", function() {
		// console.log("111")
		//警告消息框关闭
		document.getElementById("warnInfo").style.display="none";
	 });



	//获取计时
	countTime=document.getElementById("countTime");

	//用于遍历选择题ABCD四个选项
	var selectABCD=['A','B','C','D'];
	//正确数量
	var doTrueCount=0;
	//错误数量
	var doFalseCount=0;

	//做题花的时间秒
	var doTimeS=0;


	// //悬浮框显示的时间
	// var nowTimeS=0;



	//用于判断该选项是否已经做过false表示未做，0表示1题，1表示2题。。。
	var selectFlag=[];
	//初始化数组
	for (let i = 0; i < 10; i++) {
		selectFlag[i]=false;
	}

	//设置可以做题,设置true为不可填写，false为可以填写
	function setCanDo( doAndNot) {
		// console.log(SingleSelects)
		for (let i = 0; i < SingleSelects.length; i++) {
			// console.log(SingleSelects[i].id.substring(1,))

			if (!selectFlag[parseInt(SingleSelects[i].id.substring(1,))-1] ) {

				SingleSelects[i].disabled = doAndNot
			}

		}

		
	}

	function startAndStopTime(){
		if (btnFlag){

			setCanDo(false)
			// document.getElementById("A1").disabled=false;
			haedTitle.innerHTML="计时中"
			timer = setInterval(function () {
				if (haedTitle.innerHTML =="计时中"){
					document.getElementById("haedTitle").innerHTML="计时中。"
				}else if (haedTitle.innerHTML =="计时中。"){
					document.getElementById("haedTitle").innerHTML="计时中。。"
				}else if (haedTitle.innerHTML =="计时中。。"){
					document.getElementById("haedTitle").innerHTML="计时中。。。"
				}else if (haedTitle.innerHTML =="计时中。。。"){
					document.getElementById("haedTitle").innerHTML="计时中"
				}
				// console.log("aaa")
				// if (doTimeS>=59){
				// 	doTimeM=doTimeM+1;
				// 	doTimeS=0;
				// }
				doTimeS = doTimeS + 1;

				if (doTimeS<60){
					countTime.innerHTML = (doTimeS%60)+"秒"+"<div style='display:inline;color: #46e35a;'>• </div>";
				}else {
					countTime.innerHTML = Math.trunc(doTimeS/60)+"分"+(doTimeS%60)+"秒"+"<div style='display:inline;color: #46e35a;'>• </div>";
				}


			}, 1000);
			btnFlag=false;
		}else {
			setCanDo(true)
			document.getElementById("haedTitle").innerHTML="暂停等待"

			btnFlag=true;
			if (doTimeS<60){
				countTime.innerHTML = (doTimeS%60)+"秒"+"<div style='display:inline;color: red;'>• </div>";
			}else {
				countTime.innerHTML = Math.trunc(doTimeS / 60) + "分" + (doTimeS % 60) + "秒" + "<div style='display:inline;color: red;'>• </div>";
			}
			clearInterval(timer);


		}

	}

	//点击开始触发计时开始和停止
	startButton.addEventListener("click",function() {
		if (document.getElementById("warnInfo").style.display!='none'){
			document.getElementById("warnInfo").style.display="none";
		}

		
		startAndStopTime()

	});

	//悬浮框点击触发计时开始和停止
	countTime.addEventListener("click",function() {
		if (document.getElementById("warnInfo").style.display!='none'){
			document.getElementById("warnInfo").style.display="none";
		}
		

		startAndStopTime()
	});


	// 到题目位置的导航栏
	let goPoint = document.getElementsByClassName("page-item");

	for (let i = 0; i < goPoint.length; i++) {
		//监听按钮点击
		goPoint[i].addEventListener("click", function() {
			// console.log(i)

			for (let j = 0; j < goPoint.length; j++) {
				goPoint[j].className="page-item";
			}
			goPoint[i].className="page-item active";
		});
	}

	// var spaceAnswerAll = document.getElementsByClassName("spaceAnswer");
	for (let num = 0; num < SingleSelects.length; num++) {

		console.log("点击")
		//监听按钮点击
		SingleSelects[num].addEventListener("click", function() {

			//显示选择的题号
			let titleNum=SingleSelects[num].id.substring(1,);

			//true表示该题已做不可再选
			selectFlag[parseInt(titleNum)-1]=true

			console.log("点击"+titleNum)

			//将该题设置为不可选
			for (let i = 0; i < selectABCD.length; i++) {
				document.getElementById(selectABCD[i]+titleNum).disabled=true
			}


			// console.log(titleNum)
			//显示答案
			let answerEl=document.getElementById("trueAnswer"+titleNum)
			//显示答案
			answerEl.style.display="block"
			//获取答案文本
			// console.log(answerEl.innerText.substring(4,))
			//
			//
			// console.log(SingleSelects[num].value)

			//正确答案与选项内容比对
			if (answerEl.innerText.substring(5,)===SingleSelects[num].value){
				//选择正确答案图标展示
				document.getElementById("icoT"+SingleSelects[num].id).style.display="inline"
				//正确计数加1
				doTrueCount=doTrueCount+1;


			}else {
				//选择错误答案图标展示
				document.getElementById("icoF"+SingleSelects[num].id).style.display="inline"

				doFalseCount=doFalseCount+1;

				//遍历选项寻找正确答案进行展示
				for (let i = 0; i <selectABCD.length ; i++) {

					//ABCD获取选择内容
					let selectText=document.getElementById(selectABCD[i]+titleNum).value
					//对比ABCD选项找到正确答案
					if (answerEl.innerText.substring(5,)===selectText){
						//对正确选项予以展示
						document.getElementById("icoT"+selectABCD[i]+titleNum).style.display="inline"
						// 答案展示
						answerEl.innerText="应该选："+selectABCD[i]+"{ "+selectText+" }"
					}
				}

			}
		});
	}


	function correct() {

		if (doTimeS<60){
			document.getElementById("useTime").innerHTML="用时："+(doTimeS%60)+"秒";
		}else {
			document.getElementById("useTime").innerHTML="用时："+Math.trunc(doTimeS/60)+"分"+(doTimeS%60)+"秒";
		}

		document.getElementById("tNum").innerHTML="正确："+doTrueCount;
		document.getElementById("fNum").innerHTML="错误："+doFalseCount;
		document.getElementById("notNum").innerHTML="未做："+(10-doTrueCount-doFalseCount);
	}


</script>

</body>
</html>